<template>
  <div>
   <el-upload
    class="avatar-uploader"
    action="#"
    :on-change="handleChange"
    :show-file-list="false"
    :disabled="disabled"
    accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PBG"
    :auto-upload="false">
        <div v-if="imageUrl">
            <div class="avatar">
              <img :src="imageUrl">
            </div>
            <span class="el-upload-list__item-actions">
                <span                               
                class="el-upload-list__item-delete"
                @click.stop="handleRemove()"
                >
                <i class="el-icon-delete"></i>
                </span>
            </span>
        </div>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog
      width="800px"
      :title="$t('common.crop_image')"
      :visible.sync="cropper_visible"
      append-to-body
      @close="cancel"
    >
      <div>
        <img ref="image" :src="cropper_imageSrc" alt="Image to crop" style="max-width: 90%; max-height: 500px" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="confirm" size="small">{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css'; // 引入样式
  export default {
    props:{
        maxSize:{//上次图片最大值kb
            type:Number,
            default:200
        },
        isCropperImage:{//是否裁剪  默认不裁剪
            type:Boolean,
            default:false
        },
    },
    data() {
      return {
        cropper_visible:false,
        cropper_imageSrc: '',    // 存储图片的 Base64 字符串
        cropper: null,  // Cropper 实例



        imageUrl: '',
        dialogVisible: false,
        disabled: false,
      };
    },
    watch:{
        imageUrl(){
            this.disabled=this.imageUrl.length>0
        }
    },
    methods: {
        setImageUrl(img_url){
            if(!!img_url){
                this.imageUrl= img_url
            }
        },
        handleRemove() {
            this.imageUrl=''
            setTimeout(()=>{
                this.disabled=false
            },500)
            this.$emit('FileList', '');
        },
        handleChange(file,fileList) {
            const isLt2M = file.size / 1024 < this.maxSize;
            if (!isLt2M) {
                this.$message.error(this.$t('common.upload_img_tips')+this.maxSize+'kb!');
                return
            }
            this.imageUrl = URL.createObjectURL(file.raw);
            this.disabled=true
            // this.$emit('FileList', file);

            if(this.isCropperImage){
              this.cropper_visible=true
              this.cropper_imageSrc=URL.createObjectURL(file.raw);
              this.$nextTick(() => {
                if (this.cropper) {
                  this.cropper.destroy(); // 销毁旧的 Cropper 实例
                }
                // 初始化 Cropper
                this.cropper = new Cropper(this.$refs.image, {
                  // • aspectRatio: 裁剪框的宽高比（如 1/1、16/9）。
                  // • viewMode: 视图模式（0、1、2、3），影响裁剪框和图片的移动范围限制。
                  // • autoCropArea: 初始裁剪区域占图片面积的比例（0 到 1）。
                  // • movable: 是否可移动图片。
                  // • zoomable: 是否可缩放图片。
                  // • scalable: 是否可缩放图片（不同方向）。
                  // • cropBoxMovable: 是否可移动裁剪框。
                  // • cropBoxResizable: 是否可调整裁剪框大小。
                  initialAspectRatio: 345 / 186, // 设置裁剪框的固定比例
                  aspectRatio: 345 / 186, // 设置裁剪框的固定比例
                  viewMode: 1,         // 视图模式，1 限制裁剪框不超过图片范围
                  autoCropArea: 0.9,   // 初始裁剪区域占图片的比例
                  dragMode: 'move',//此设置确保用户的拖动操作是​​移动图片本身​​，而不是移动裁剪框
                  cropBoxMovable: false,//此设置​​禁止用户直接拖动裁剪框​​，实现了裁剪框的固定。
                  cropBoxResizable: false,//此设置​​禁止用户调整裁剪框的大小​​，进一步固定了裁剪框的尺寸。
                  
      


                });
              });
            }else{
              this.$emit('FileList', file);
            }
            console.log(file)
        },
        //确认裁剪
        confirm(){
          if (!this.cropper) return;
          // 获取裁剪后的 Canvas 元素，并转换为 Base64 字符串
          const canvas = this.cropper.getCroppedCanvas();
          if (canvas) {
            // 将 Canvas 转换为 Blob 对象
            canvas.toBlob((blob) => {
              // 将 Blob 转换为 File 对象
              const fileName = `cropped-image-${new Date().getTime()}.png`; // 生成文件名
              const file = new File([blob], fileName, { type: 'image/png' }); // 创建 File 对象[6](@ref)
              
              // 现在你有了 File 对象 `file`，可以用于上传或其他操作
              this.imageUrl=JSON.parse(JSON.stringify(canvas.toDataURL('image/jpeg')))
              this.$emit('FileList', {raw:file,src:this.imageUrl});
              this.cropper_visible = false;
            }, 'image/jpeg', 0.9); // 指定格式为 JPEG，质量为 0.9[8](@ref)
            this.isConfirm=true //确定裁剪
          }
        },
        cancel(){
          if(!this.isConfirm){
            this.imageUrl=''
            this.cropper_imageSrc=''
            this.$emit('FileList', '');
          }
          this.$nextTick(() => {
            if (this.cropper) {
              this.cropper.destroy(); // 销毁旧的 Cropper 实例
            }
            this.cropper_visible = false;
          });
        },
    }
  }
</script>
<style scoped lang="less" >
    .avatar-uploader /deep/.el-upload {
        border: 1px dashed #777;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader /deep/.el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
    .avatar {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;

        img{
          width: 100%;
        }
    }
    .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        transition: opacity .3s;
    }
    .el-upload-list__item-actions:hover {
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            display: inline-block;
            cursor: pointer;
        }
        .el-upload-list__item-delete {
            position: unset;
            font-size: inherit;
            color: inherit;
        }
    }


    /* 确保图片容器有合适的尺寸 */
    /deep/.cropper-container {
      max-width: 100%;
      max-height: 500px;
    }
    // /* 覆盖 Cropper.js 的默认样式（可选） */
    // .cropper-view-box,
    // .cropper-face {
    //   border-radius: 50%; /* 例如，圆形裁剪 */
    // }
</style>